<template>
  <div class="printBox" >
    <div style="page-break-after:always;overflow:hidden;" v-for="item in dataList">
      <el-image :src="item"  style="width:95%;display:block;margin: 0 auto" height="100%" />
      <!--        <h4 class="pageTitle marginBottom10">{{ dataInfo.firmName }}</h4>-->
      <!--        <h4 class="pageTitle marginBottom20">{{ dataInfo.customerName }} {{ dataInfo.auditYear }}年财务报表审计报告</h4>-->
      <!--        <div v-if="dataInfo.codeStatus === '已作废'" class="invalidBox">-->
      <!--          <span class="iconfont iconshibai" style="font-size: 90px; color: #e85252"></span>-->
      <!--          <p>该报告信息调整中: <span class="colorDanger fontSize28 marginLeft20">信息已作废</span></p>-->
      <!--        </div>-->
      <!--        <div v-else class="validBox">-->
      <!--          <div class="infoView">-->
      <!--            <p><span>报告文号</span>:<span>{{ dataInfo.reportNo }}</span></p>-->
      <!--            <div v-for="(item,index) in dataInfo.assuranceBusinessDataRegisterSignatures" :key="index">-->
      <!--              <p><span>签字注册会计师</span>:<span>{{item.registrantName}}</span></p>-->
      <!--              <p><span>注师编号</span>:<span>{{ item.registrationCertificateNo }}</span></p>-->
      <!--            </div>-->
      <!--            <p><span>防伪编码</span>:<span>{{ dataInfo.antiCounterfeitingCoding}}</span></p>-->
      <!--          </div>-->
      <!--          <div class="codeBox">-->
      <!--            <el-image style="width: 200px; height: 200px" v-if="dataInfo.qRCode"-->
      <!--                      :src="picturePrefix + dataInfo.qRCode"-->
      <!--                      :preview-src-list="[picturePrefix + dataInfo.qRCode]" alt="">-->
      <!--              <div slot="error" class="image-slot">-->
      <!--                <i class="el-icon-picture-outline"></i>-->
      <!--              </div>-->
      <!--            </el-image>-->
      <!--            <p>-->
      <!--              <span>{{ dataInfo.antiCounterfeitingCoding}}</span>-->
      <!--              <span>{{ dataInfo.reportNo }}</span>-->
      <!--            </p>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--        <p class="pageTitle marginTop46">事务所信息</p>-->
      <!--        <div class="infoView infoView2">-->
      <!--          <p><span>事务所名称</span>:<span>{{ dataInfo.firmName}}</span></p>-->
      <!--          <p><span>通讯地址</span>:<span v-if="dataInfo.office && dataInfo.office.mailingAddress">{{ dataInfo.office.mailingAddress }}</span></p>-->
      <!--          <p><span>事务所电话</span>:<span v-if="dataInfo.office && dataInfo.office.contactNumber">{{ dataInfo.office.contactNumber }}</span></p>-->
      <!--        </div>-->
      <!--        <p class="border1px"></p>-->
      <!--        <p class="pageFooter">-->
      <!--        <span>-->
      <!--          业务报告使用防伪编码仅说明该业务报告是由依法批准设立的会计事务所出具，-->
      <!--        业务报告的法律责任主体是出具报告的会计师事务所及签字注册会计师。-->
      <!--        </span>-->
      <!--          <span>-->
      <!--          报告防伪信息查询网址：<a href="http://www.shcpa.org.cn">http://www.shcpa.org.cn</a>-->
      <!--        </span>-->
      <!--        </p>-->
      <!--      </div>-->
    </div>
  </div>
</template>

<script>

    export default {
        name: "AuditReport",
        data() {
            return {
                dataList: [],
                picturePrefix: 'data:image/png;base64,', // 图片前缀
            };
        },
        created() {
            this.getData(this.dataList);
        },
        methods: {
            getData(dataList) {
                this.dataList = dataList;
            },
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .printBox {
    min-height: 70vh;
    overflow: auto;
    position: relative;
    .pageTitle{
      color: #333;
      font-weight: 500;
      font-size: 24px;
      text-align: center;
    }
    .pageFooter{
      width: 600px;
      margin: 30px auto 0 auto;
      font-size: 16px;
      line-height: 30px;
      color: #333;
      text-align: center;
      span{
        display: block;
        margin-top: 10px;
      }
    }
    .validBox{
      display: flex;
      justify-content: space-between;
      padding: 15px 0;
      .codeBox{
        width: 200px;
        text-align: center;
        margin-top:-24px;
        p{
          font-size: 20px;
          color: #333;
          span{
            display: inline-block;
            width: 200px;
            text-align: center;
            font-size: 14px;
            line-height: 0px;
            &::after {
              display: inline-block;
              width: 100%;
              content: '';
              height: 0;
            }
          }
        }
      }
    }
    .infoView{
      p{
        margin-bottom: 15px;
        font-size: 16px;
        color: #333;
        span{ display: inline-block; }
        span:first-child{
          width: 120px;
          text-align:justify;
          vertical-align: top;

          &::after {
            display: inline-block;
            width: 100%;
            content: '';
            height: 0;
          }
        }
        span:last-child{ margin-left: 10px; text-align: left;}
      }
    }
    .infoView2{
      width: fit-content;
      margin: 20px auto;
      p{
        span:first-child{ width: 100px}
      }
    }
    .invalidBox{
      height: 300px;
      text-align: center;
      font-size: 20px;
      .iconshibai{
        display: inline-block;
        margin: 40px 0;
        font-size: 90px;
        color: #e85252;
      }
    }
  }
  .contentPrintBox{
    padding-top: 40px;
    max-height: unset;
  }
  @page{
    size: auto A4 landscape;
    margin: 3mm;
  }
  ::v-deep .el-image__inner--center{
    top:0;
    left:0;
    transform: translate(0%, 0%);
  }
</style>
